<template>
  <el-container class="main-content">
    <el-aside class="aside" width="auto">
      <navMenu />
    </el-aside>
    <el-container class="page">
      <el-header
        class="page-header"
        @click="globalStore.asideIsCollapse = !globalStore.asideIsCollapse"
        ><navHeader
      /></el-header>
      <el-main class="page-main"
        ><div @click="goto">main</div>
        <RouterView></RouterView
      ></el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'

import navMenu from '@/components/nav-menu/index.js'
import navHeader from '@/components/nav-header/index.js'
import { useGlobalStore } from '@/stores/global/global.js'
import router from '@/router/index.js'
const goto = () => {
  router.push('/main/system/user/role')
}
const globalStore = useGlobalStore()
</script>
<style scoped lang="less">
.main-content {
  height: 100%;
}
.aside {
  background-color: rgb(40, 40, 50);
  max-width: 240px;
}
.page-main {
  background-color: #eee;
}
</style>
